<template>
  <div>
    <div   :style="{marginTop: initmarginTop,height: levelHeight}">
      <div class="lecturerLevel-title" :style="{fontSize: initTitleFontSize,width: initYWidth,paddingLeft: initYPaddingLeft,height: levelHeight,lineHeight: levelHeight}">&nbsp;</div>
      <div class="lecturerLevel-title" :style="{fontSize: initTitleFontSize,width: initYWidth,height: levelHeight,lineHeight: levelHeight}">讲师层级</div>
      <div class="lecturerLevel-title" :style="{fontSize: initTitleFontSize,width: initYWidth,height: levelHeight,lineHeight: levelHeight}">星星讲师</div>
      <div class="lecturerLevel-title" :style="{fontSize: initTitleFontSize,width: initYWidth,height: levelHeight,lineHeight: levelHeight}">月亮讲师</div>
      <div class="lecturerLevel-title" :style="{fontSize: initTitleFontSize,width: initYWidth,height: levelHeight,lineHeight: levelHeight}">太阳讲师</div>
    </div>
    <div>
      <div class="level-background" :style="{height: levelHeight}">
        <div class="lecturerLevel-title" :style="{fontSize: initTitleFontSize,width: initYWidth,paddingLeft: initYPaddingLeft,height: levelHeight,lineHeight: levelHeight}">讲师层级</div>
        <div class="level-font" :style="{fontSize: initFontSize,width: initYWidth,height: levelHeight,lineHeight: levelHeight}">T1</div>
        <div class="level-font" :style="{fontSize: initFontSize,width: initYWidth,height: levelHeight,lineHeight: levelHeight}">T2</div>
        <div class="level-font" :style="{fontSize: initFontSize,width: initYWidth,height: levelHeight,lineHeight: levelHeight}">T3</div>
        <div class="level-font" :style="{fontSize: initFontSize,width: initYWidth,height: levelHeight,lineHeight: levelHeight}">T4</div>
      </div> 
      <div  :style="{height: levelHeight}">      
        <div class="lecturerLevel-title" :style="{fontSize: initTitleFontSize,width: initYWidth,paddingLeft: initYPaddingLeft,height: levelHeight,lineHeight: levelHeight}">经验</div>
        <div class="level-font" :style="{fontSize: initFontSize,width: initYWidth,height: levelHeight,lineHeight: levelHeight}">半年</div>
        <div class="level-font" :style="{fontSize: initFontSize,width: initYWidth,height: levelHeight,lineHeight: levelHeight}">一年</div>
        <div class="level-font" :style="{fontSize: initFontSize,width: initYWidth,height: levelHeight,lineHeight: levelHeight}">两年</div>
        <div class="level-font" :style="{fontSize: initFontSize,width: initYWidth,height: levelHeight,lineHeight: levelHeight}">三年</div>
      </div>
      <div class="level-background" :style="{height: levelHeight}">      
        <div class="lecturerLevel-title" :style="{fontSize: initTitleFontSize,width: initYWidth,paddingLeft: initYPaddingLeft,height: levelHeight,lineHeight: levelHeight}">年度课时</div>
        <div class="level-font" :style="{fontSize: initFontSize,width: initYWidth,height: levelHeight,lineHeight: levelHeight}">5</div>
        <div class="level-font" :style="{fontSize: initFontSize,width: initYWidth,height: levelHeight,lineHeight: levelHeight}">10</div>
        <div class="level-font" :style="{fontSize: initFontSize,width: initYWidth,height: levelHeight,lineHeight: levelHeight}">20</div>
        <div class="level-font" :style="{fontSize: initFontSize,width: initYWidth,height: levelHeight,lineHeight: levelHeight}">30</div>
      </div>
      <div :style="{height: levelHeight}">        
        <div class="lecturerLevel-title" :style="{fontSize: initTitleFontSize,width: initYWidth,paddingLeft: initYPaddingLeft,height: levelHeight,lineHeight: levelHeight}">优化课件</div>
        <div class="level-font" :style="{fontSize: initFontSize,width: initYWidth,height: levelHeight,lineHeight: levelHeight}">1</div>
        <div class="level-font" :style="{fontSize: initFontSize,width: initYWidth,height: levelHeight,lineHeight: levelHeight}">1</div>
        <div class="level-font" :style="{fontSize: initFontSize,width: initYWidth,height: levelHeight,lineHeight: levelHeight}">5</div>
        <div class="level-font" :style="{fontSize: initFontSize,width: initYWidth,height: levelHeight,lineHeight: levelHeight}">10</div>
      </div>
      <div class="level-background" :style="{height: levelHeight}">        
        <div class="lecturerLevel-title" :style="{fontSize: initTitleFontSize,width: initYWidth,paddingLeft: initYPaddingLeft,height: levelHeight,lineHeight: levelHeight}">课程</div>
        <div class="level-font" :style="{fontSize: initFontSize,width: initYWidth,height: levelHeight,lineHeight: levelHeight}">1</div>
        <div class="level-font" :style="{fontSize: initFontSize,width: initYWidth,height: levelHeight,lineHeight: levelHeight}">2</div>
        <div class="level-font" :style="{fontSize: initFontSize,width: initYWidth,height: levelHeight,lineHeight: levelHeight}">5</div>
        <div class="level-font" :style="{fontSize: initFontSize,width: initYWidth,height: levelHeight,lineHeight: levelHeight}">10</div>
      </div>
      <div  :style="{height: levelHeight}">      
        <div class="lecturerLevel-title" :style="{fontSize: initTitleFontSize,width: initYWidth,paddingLeft: initYPaddingLeft,height: levelHeight,lineHeight: levelHeight}">评分</div>
        <div class="level-font" :style="{fontSize: initFontSize,width: initYWidth,height: levelHeight,lineHeight: levelHeight}">/</div>
        <div class="level-font" :style="{fontSize: initFontSize,width: initYWidth,height: levelHeight,lineHeight: levelHeight}">80</div>
        <div class="level-font" :style="{fontSize: initFontSize,width: initYWidth,height: levelHeight,lineHeight: levelHeight}">85</div>
        <div class="level-font" :style="{fontSize: initFontSize,width: initYWidth,height: levelHeight,lineHeight: levelHeight}">90</div>
      </div>
      <div class="level-background" :style="{height: levelHeight}">        
        <div class="lecturerLevel-title" :style="{fontSize: initTitleFontSize,width: initYWidth,paddingLeft: initYPaddingLeft,height: levelHeight,lineHeight: levelHeight}">讲师分享</div>
        <div class="level-font" :style="{fontSize: initFontSize,width: initYWidth,height: levelHeight,lineHeight: levelHeight}">/</div>
        <div class="level-font" :style="{fontSize: initFontSize,width: initYWidth,height: levelHeight,lineHeight: levelHeight}">2</div>
        <div class="level-font" :style="{fontSize: initFontSize,width: initYWidth,height: levelHeight,lineHeight: levelHeight}">3</div>
        <div class="level-font" :style="{fontSize: initFontSize,width: initYWidth,height: levelHeight,lineHeight: levelHeight}">4</div>
      </div>
      <div :style="{height: levelHeight}">       
        <div class="lecturerLevel-title" :style="{fontSize: initTitleFontSize,width: initYWidth,paddingLeft: initYPaddingLeft,height: levelHeight,lineHeight: levelHeight}">培训建议</div>
        <div class="level-font" :style="{fontSize: initFontSize,width: initYWidth,height: levelHeight,lineHeight: levelHeight}">/</div>
        <div class="level-font" :style="{fontSize: initFontSize,width: initYWidth,height: levelHeight,lineHeight: levelHeight}">/</div>
        <div class="level-font" :style="{fontSize: initFontSize,width: initYWidth,height: levelHeight,lineHeight: levelHeight}">1</div>
        <div class="level-font" :style="{fontSize: initFontSize,width: initYWidth,height: levelHeight,lineHeight: levelHeight}">2</div>
      </div>
      <div class="level-background" :style="{height: levelHeight}">    
        <div class="lecturerLevel-title" :style="{fontSize: initTitleFontSize,width: initYWidth,paddingLeft: initYPaddingLeft,height: levelHeight,lineHeight: levelHeight}">培训讲师</div>
        <div class="level-font" :style="{fontSize: initFontSize,width: initYWidth,height: levelHeight,lineHeight: levelHeight}">/</div>
        <div class="level-font" :style="{fontSize: initFontSize,width: initYWidth,height: levelHeight,lineHeight: levelHeight}">/</div>
        <div class="level-font" :style="{fontSize: initFontSize,width: initYWidth,height: levelHeight,lineHeight: levelHeight}">1</div>
        <div class="level-font" :style="{fontSize: initFontSize,width: initYWidth,height: levelHeight,lineHeight: levelHeight}">1</div>
      </div>
    </div>
    <div class="bodySize" :style="{height: bodySizeHeight,paddingTop: bodySizePaddingTop}">
        <div class="lecturerLevel-center" :style="{fontSize: initBodyFontSize,paddingLeft:initBodyPaddingLeft,paddingRight:initBodyPaddingRight}">您目前是网营的T{{lecturerScope.level}}讲师，您可以向培训部申请成为T{{nextLevel}}讲师。</div>
        <div v-if="(isProcess == 0)" class="lecturerLevel-center" :style="{marginTop: initButtonMarginTop}"><mt-button class="n-level-button-true" type="default" v-on:click="submitPromote()" :style="{width: initButtonWidth,height: initButtonHeight,fontSize: initBodyFontSize,}">申请晋升</mt-button></div>
        <div v-if="(isProcess == 1)" disabled class="lecturerLevel-center" :style="{marginTop: initButtonMarginTop}"><mt-button class="n-level-button-false" type="default" :style="{width: initButtonWidth,height: initButtonHeight,fontSize: initBodyFontSize,}">审批中</mt-button></div>
    </div>  
  </div>
</template>

<script>
    import { addLecturerPromote, getLecturersMessage } from '@/api/lecturer'
    import { fetchMessage } from '@/api/message'
    import { MessageBox } from 'mint-ui'
    export default {
      data () {
        return {
          isProcess: 0,
          lecturerScope: {},
          nextLevel: 0
        }
      },
      created () {
        this.getPromoteIsProcess()
        this.fetchLecturersMessage()
      },
      filter: {

      },
      computed: {
        initWidth () {
          return this.clientWidth * 1000 / 750 + 'px'
        },
        initmarginTop () {
          return this.clientWidth * 30 / 750 + 'px'
        },
        initTitleHeight () {
          return this.clientWidth * 100 / 750 + 'px'
        },
        initTitlePaddingLeft () {
          return this.clientWidth * 100 / 750 + 'px'
        },
        initTitleFontSize () {
          return this.clientWidth * 22 / 750 + 'px'
        },
        initFontSize () {
          return this.clientWidth * 24 / 750 + 'px'
        },
        initBodyFontSize () {
          return this.clientWidth * 28 / 750 + 'px'
        },
        initYWidth () {
          return this.clientWidth * 138 / 750 + 'px'
        },
        initYPaddingLeft () {
          return this.clientWidth * 30 / 750 + 'px'
        },
        initBodyWidth () {
          return this.clientWidth * 30 / 750 + 'px'
        },
        initBodyPaddingLeft () {
          return this.clientWidth * 138 / 750 + 'px'
        },
        initBodyPaddingRight () {
          return this.clientWidth * 138 / 750 + 'px'
        },
        initButtonWidth () {
          return this.clientWidth * 414 / 750 + 'px'
        },
        initButtonHeight () {
          return this.clientWidth * 86 / 750 + 'px'
        },
        initButtonMarginTop () {
          return this.clientWidth * 68 / 750 + 'px'
        },
        levelHeight () {
          return this.clientWidth * 64 / 750 + 'px'
        },
        bodySizeHeight () {
          return this.clientWidth * 238 / 750 + 'px'
        },
        bodySizePaddingTop () {
          return this.clientWidth * 98 / 750 + 'px'
        }
      },
      methods: {
        fetchLecturersMessage () {
          getLecturersMessage(this.listQuery).then(response => {
            this.lecturerScope = response.data
            this.nextLevel = response.data.level + 1
          })
        },
        getPromoteIsProcess () {
          fetchMessage(this.listQuery).then(response => {
            this.isProcess = response.data
          })
        },
        submitPromote () {
          addLecturerPromote().then(response => {
            if (response.data === 'SUCCESS') {
              MessageBox({
                title: '已提交',
                message: '您的申请已提交,等待培训部审批。'
              })
              this.getPromoteIsProcess()
            }
          })
        }
      }
    }
</script>


<style>
.lecturerLevel-title{
  text-align: center;
  color:#7c8291;
  float: left;
}
.level-font{
  color: #5b6175;
  text-align: center;
  float: left;
}
.level-background{
  background: #e5f8f3;
}

.lecturerLevel-center{
  text-align: center;
}
</style>
